<template>
  <div class="pad-content-box">
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane :label="item.name" :name="item.primaryKey" v-for="item in tabList" :key="item.primaryKey">
        <bill-list :ref="item.primaryKey"></bill-list>
      </el-tab-pane>
    </el-tabs>
    <div class="btn-box">
        <el-button type="primary" size="mini" >导出</el-button>
        <el-button type="primary" size="mini" >导入</el-button>
        <el-button type="primary" size="mini" >出账</el-button>
    </div>
  </div>
</template>
<script>
  import merge from 'webpack-merge';
  import billList from './list.vue';
  export default {
    data() {
      return {
        activeName: '',
        processName: '',
        tabList: [
          { primaryKey: "11", name: '租金账单' },
          { primaryKey: "1122", name: '管理费账单' },
          { primaryKey: "1133", name: '水费账单' },
          { primaryKey: "1144", name: '电费账单' },
        ],
      };
    },
    mounted() {
      this.setActiveName();
    },
    methods: {
      tabClick() {
        this.changeType(this.activeName);
        this.$nextTick(() => {
          this.$refs[this.activeName][0].getInfo();
        });
      },

      //设置ActiveName
      setActiveName() {
        if (!this.$route.query.tab) {
          this.changeType('11');
        }
        this.activeName = this.$route.query.tab;
        this.$nextTick(() => {
          this.$refs[this.activeName][0].getInfo();
        });
      },
      //更新路由参数
      changeType(name) {
        if (this.$route.query.tab == name) {
          return false;
        }

        this.$router.replace({
          query: merge(this.$route.query, { tab: name }),
        });
      },
    },
    components: {
      billList,
    },
  };
</script>

<style lang="scss" scoped>
    .btn-box{
        position: absolute;
        top: 10px;
        right: 30px;
    }
</style>
